<template>
    <div class="letter">
        <p class="letter-title">字母列表</p>
        <ul class="letter-list">
            <li class="letter-item ">A</li>
            <li class="letter-item ">B</li>
            <li class="letter-item ">C</li>
            <li class="letter-item ">D</li>
            <li class="letter-item ">E</li>
            <li class="letter-item ">F</li>
            <li class="letter-item ">G</li>
            <li class="letter-item ">H</li>
            <li class="letter-item ">I</li>
            <li class="letter-item ">J</li>
            <li class="letter-item ">K</li>
            <li class="letter-item ">L</li>
            <li class="letter-item ">A</li>
            <li class="letter-item ">B</li>
            <li class="letter-item ">C</li>
            <li class="letter-item ">D</li>
            <li class="letter-item ">E</li>
            <li class="letter-item ">F</li>
            <li class="letter-item ">G</li>
            <li class="letter-item ">H</li>
            <li class="letter-item ">I</li>
            <li class="letter-item ">J</li>
        </ul>
    </div>
</template>

<script>
    export default {
        
        data () {
            return {
            
            }
        }
    }   
</script>

<style lang="stylus" scoped>
    .letter{
        font-size .28rem
        color #212121
    }
        .letter .letter-title{
            font-size .24rem
            line-height  .7rem
            padding-left .32rem
            
        }
        .letter-list{
            padding .2rem 0
            position relative
            background-color #fff
            overflow hidden
            
        }
        
        .letter-list .letter-item{
            float left
            width 16.66%
            line-height .8rem
            text-align center
            
        }
        
       

</style>